<template>
    <div class="taskManager">
        <div class="one">
            <el-row :gutter="10" justify="space-around">
                <el-col :span="4">
                    <el-input v-model.trim="condition.department" placeholder="请输入部门"></el-input>
                </el-col>
                <el-col :span="4" :offset="1">
                    <el-input v-model.trim="condition.area" placeholder="请输入地区"></el-input>
                </el-col>
                <el-col :span="4" çççç>
                    <el-input v-model.trim="condition.principal" placeholder="请输入负责人"></el-input>
                </el-col>
                <el-col :span="4" :offset="1">
                    <el-input v-model.trim="condition.client" placeholder="请输入客户名称"></el-input>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="primary" @click="asyncData">同步数据</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="dayin">
            <el-row :gutter="10" justify="space-around">
                <el-col :span="4">
                    <el-input v-model.trim="condition.terminal" placeholder="请输入终端"></el-input>
                </el-col>
                <el-col :span="4" :offset="1">
                    <el-input v-model.trim="condition['allotPersons.userName']" placeholder="请输入分配人姓名"></el-input>
                </el-col>

                <el-col :span="4" :offset="1">
                    <el-select v-model="condition.status" placeholder="分配状态" style="width:100%">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="primary" @click="searchClient()">查询</el-button>
                </el-col>
                <el-col :span="3" :offset="1">
                    <el-button type="primary" @click="printQR()">打印设备卡片</el-button>
                </el-col>
            </el-row>
        </div>
        <el-row>
            <el-col :span="24">
                <el-table ref="multipleTable" stripe :data="tableData" border tooltip-effect="dark" style="width: 100%" v-loading.body="loading" :element-loading-text="loadingName" @selection-change="handleSelectionChange">
                    <el-table-column type="index" width="53">
                    </el-table-column>
                    <el-table-column type="expand">
                        <template scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="仪器类型：">
                                    <span>{{ props.row.instrumentType }}</span>
                                </el-form-item>
                                <el-form-item label="仪器型号：">
                                    <span>{{ props.row.instrumentVersion }}</span>
                                </el-form-item>
                                <el-form-item label="签约时间：">
                                    <span>{{ props.row.signDate | formatDate}}</span>
                                </el-form-item>
                                <el-form-item label="合同期起：">
                                    <span>{{ props.row.contractStart | formatDate }}</span>
                                </el-form-item>
                                <el-form-item label="合同期止：">
                                    <span>{{ props.row.contractEnd | formatDate}}</span>
                                </el-form-item>
                                <el-form-item label="合同总额：">
                                    <span>{{ props.row.contractSum }}</span>
                                </el-form-item>
                                <el-form-item label="合作期：">
                                    <span>{{ props.row.cooperationDate }}</span>
                                </el-form-item>
                                <el-form-item label="保修：">
                                    <span>{{ props.row.maintain }}</span>
                                </el-form-item>
                                <el-form-item label="仪器编码：">
                                    <span>{{ props.row.instrumentCode }}</span>
                                </el-form-item>
                                <el-form-item label="安装时间：">
                                    <span>{{ props.row.installDate | formatDate }}</span>
                                </el-form-item>
                                <el-form-item label="调试时间：">
                                    <span>{{ props.row.debugDate | formatDate}}</span>
                                </el-form-item>
                                <el-form-item label="固定资产编码：">
                                    <span>{{ props.row.fixedAssetsCode }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column type="selection" width="55">
                    </el-table-column>

                    <el-table-column prop="status" label="分配信息" width="100" show-overflow-tooltip>
                        <template scope="scope">
                            <el-tag class="personTag" v-for="person in scope.row.allotPersons" :key="person">{{person.userName}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contractCode" label="合同编号 " show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="client" label="客户" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="terminal" id="demo16" label="终端" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="agreementType" label="协议类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="department" label="部门" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="area" label="地区" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="principal" label="负责人" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="manageTop" label="分管上级">
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="190" align="center">
                        <template scope="scope">
                            <el-button type="primary" size="small" v-show="scope.row.status == 0">
                                <span style="color: #FFF;font-size:15px" @click="allocation(scope.row,0)">分配</span>
                            </el-button>
                            <div>
                                <el-button type="primary" size="mini " v-show="scope.row.status != 0">
                                    <span style="color: #FFF ;font-size:15px" @click="allocation(scope.row,2)">分配</span>
                                </el-button>
                                <el-button type="primary" size="mini " v-show="scope.row.status != 0">
                                    <span style="color: #FFF ;font-size:15px" @click="deleteAllotPerson(scope.row)">取消</span>
                                </el-button>
                                <el-button type="primary" size="mini " v-show="scope.row.status != 0">
                                    <span style="color: #FFF ;font-size:15px" @click="allocation(scope.row,1)">重分</span>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- 分配状态弹窗 -->

                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="limit" :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="count">
                </el-pagination>
            </el-col>
        </el-row>
        <el-row>
            <!-- Form -->

            <el-dialog title="任务分配" :visible.sync="dialogFormVisible" :modal-append-to-body="false" top="10%">

                <el-form :model="form">
                    <el-form-item label="合同编号" :label-width="formLabelWidth">
                        <el-input v-model="form.contractCode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="仪器类型" :label-width="formLabelWidth">
                        <el-input v-model="form.instrumentType" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="仪器型号" :label-width="formLabelWidth">
                        <el-input v-model="form.instrumentVersion" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="客户" :label-width="formLabelWidth">
                        <el-input v-model="form.client" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="终端" :label-width="formLabelWidth">
                        <el-input v-model="form.terminal" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="任务类型" :label-width="formLabelWidth">
                        <el-select v-model="taskValue" placeholder="请选择任务类型" :change="taskChange(taskValue)">
                            <el-option v-for="task in selectTask" :key="task.value" :label="task.key" :value="task.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="周期" :label-width="formLabelWidth" v-show="monthShow">
                        <el-select v-model="monthValue" placeholder="请选择周期">
                            <el-option v-for="month in selectMonth" :key="month.value" :label="month.key" :value="month.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="截止日期" :label-width="formLabelWidth" v-show="selectDateShow">

                        <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" :change="dateChange(dateValue)">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="分配人员" :label-width="formLabelWidth">
                        <el-button @click="checkPerson">选择</el-button>
                        <el-tag type="gray" class="personTag" v-for="person in selectPersons" :key="person">{{person.name}}</el-tag>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="allotPerson(form)">确 定</el-button>
                </div>

            </el-dialog>
        </el-row>
        <el-dialog title="设备卡片下载地址,请在浏览器中访问" :visible.sync="qrModel.qrShow" :modal-append-to-body="false">
            <el-input v-model="qrModel.url"></el-input>
        </el-dialog>
    </div>
</template>
<script>
export default {
  name: "component_name",
  data() {
    return {
      qrModel: { url: "", qrCode: [], qrShow: false },
      state: 0,
      condition: { status: "" }, //查询 对象
      dialogFormVisible: false,
      form: {
        contractCode: "", //合同编号
        instrumentType: "", //仪器类型
        instrumentVersion: "", //仪器型号
        client: "", //客户
        terminal: "" //终端
      },
      dateValue: "",
      monthValue: "",
      taskValue: "", //任务类型
      monthShow: false, //周期行select 显示隐藏
      selectDateShow: false, //截至日期 select 显示隐藏
      selectPersons: [], //分配人员 名称
      selectTask: [
        { key: "周期性", value: "cycle" },
        { key: "一次性", value: "once" }
      ], //任务类型
      selectMonth: [
        { key: "一个月", value: 1 },
        { key: "二个月", value: 2 },
        { key: "三个月", value: 3 },
        { key: "四个月", value: 4 },
        { key: "五个月", value: 5 },
        { key: "六个月", value: 6 },
        { key: "七个月", value: 7 },
        { key: "八个月", value: 8 },
        { key: "九个月", value: 9 },
        { key: "十个月", value: 10 },
        { key: "十一个月", value: 11 },
        { key: "十二个月", value: 12 }
      ],
      formLabelWidth: "110px",
      searchName: "",
      selectStatus: "",
      searchPerson: "",
      options: [
        {
          value: "0",
          label: "未分配"
        },
        {
          value: "1",
          label: "已分配"
        }
      ],
      value: "",
      tableData: [],
      multipleSelection: [],
      count: 0,
      skip: 0,
      limit: 10,
      loading: true,
      loadingName: ""
    };
  },
  methods: {
    asyncData: function() {
      this.loading = true;
      this.loadingName = "开始同步数据，请耐心等待";
      this.$http.post("api/assignment/asyncData").then(
        res => {
          let result = res.data;
          if (result.code == 100) {
            this.loading = false;
            this.initList();
            this.message("同步数据成功", "success");
          }
        },
        err => {
          this.loading = false;
          this.message("未知错误", "error");
        }
      );
    },
    allotPerson: function(res) {
      //确认分配
      console.log(this.state, "state");
      //判断 周期类型 为空 验证
      if (!this.taskValue) {
        this.message("请选择任务类型", "error");
        return;
      }
      if (this.taskValue == "cycle" && !this.monthValue) {
        this.message("周期不能为空", "error");
        return;
      }
      if (this.taskValue == "once" && !this.dateValue) {
        this.message("截止日期不能为空", "error");
        return;
      }
      if (this.selectPersons.length == 0) {
        this.message("请选择要分配得人员", "error");
        return;
      }
      this.$http
        .post("api/assignment/allotForPerson", {
          assignmentManageId: res._id,
          persons: this.selectPersons,
          taskValue: this.taskValue,
          monthValue: this.monthValue,
          dateValue: this.dateValue,
          state: this.state
        })
        .then(
          res => {
            let result = res.data;
            if (result.code == 100) {
              this.message("分配成功", "success");
              this.initList(); //初始化
            }
          },
          err => {}
        );
      this.dialogFormVisible = false;
    },
    checkPerson: function() {
      //选择分配人
      let person_ = this.selectPersons;
      let userId = [];
      if (person_.length > 0) {
        person_.forEach(function(element) {
          userId.push(element.emplId);
        });
      }
      this.$ddapi.contactChoose(userId).then(res => {
        this.selectPersons = res;
      });
    },
    clearSelectValues: function() {
      //清空所有下拉框value值
      this.monthShow = true;
      this.selectDateShow = false;
      this.dateValue = "";
      this.monthValue = "";
      this.selectPersons = [];
    },
    dateChange: function(dateValue) {
      // console.log(dateValue)
    },
    taskChange: function(taskValue) {
      // console.log(taskValue, 'taskValue')
      if (taskValue == "cycle") {
        //周期性
        this.monthShow = true;
        this.selectDateShow = false;
        this.dateValue = "";
        return;
      }
      if (taskValue == "once") {
        //一次性
        this.selectDateShow = true;
        this.monthShow = false;
        this.monthValue = "";
        return;
      } else {
        //其他
        this.monthShow = false;
        this.selectDateShow = false;
        return;
      }
    },
    allocation: function(res, num) {
      //num 为0 得时候为第一次分配 1得时候为 重新分配
      this.state = num;
      //先清空数据
      this.taskValue = "";
      this.dateValue = "";
      this.monthValue = "";
      this.selectPersons = [];

      this.dialogFormVisible = true;
      let form_ = this.form;
      form_.contractCode = res.contractCode; //合同编号
      form_.instrumentType = res.instrumentType; //仪器类型
      form_.instrumentVersion = res.instrumentVersion; //仪器型号
      form_.client = res.client; //客户
      form_.terminal = res.terminal; //终端
      form_._id = res._id; //主键
    },
    deleteAllotPerson: function(resData) {
      //取消分配得人员
      this.$confirm("是否取消当前分配得人员?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res => {
          this.$http
            .post("api/assignment/deleteAllotPerson", { deleteData: resData })
            .then(
              res => {
                this.loading = true;
                let result = res.data;
                if (result.code == 100) {
                  this.message("操作成功", "success");
                }
                this.initList();
              },
              err => {}
            );
        })
        .catch(() => {});
      console.log(resData, "==================++++");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchClient: function() {
      this.initList("search");
    },
    formateValue: function(row, column, cellValue) {
      return cellValue == 0 ? "未分配" : "已分配";
    },
    handleCurrentChange: function(res) {
      if (res == 1) this.skip = 0;
      else this.skip = (res - 1) * this.limit;
      this.initList();
    },
    handleSizeChange: function(res) {
      this.limit = res;
      this.initList();
    },
    initList: function(search) {
      console.log(this.condition);
      this.$http
        .post("api/assignment/queryList", {
          condition: this.condition,
          skip: this.skip,
          limit: this.limit
        })
        .then(
          res => {
            let result = res.data;
            console.log(result, "--------------------------");
            if (result.code == 100) {
              this.loading = false;
              if (search == "search") {
                this.message("查询成功", "success");
              }
              this.tableData = res.data.data;
              this.count = res.data.count;
            }
          },
          err => {}
        );
    },
    printQR: function() {
      //此处放置新接口调用
      if (this.multipleSelection.length == 0) {
        this.message("请选择要打印得设备卡片", "info");
        return;
      }
      this.multipleSelection.map((item, i) => {
        this.qrModel.qrCode.push({
          instrumentCode: item.instrumentCode,
          terminal: item.terminal
        });
      });
      console.log(this.qrModel.qrCode, "this.qrModel.qrCode ");
      this.$http
        .post("api/assignment/qrcodeSave", { qrCode: this.qrModel.qrCode })
        .then(res => {
          let result = res.data;
          if (result.code == 100) {
            console.log(result.data, "result.data");
            this.qrModel.url = result.data;
            this.qrModel.qrShow = true;
          }
        });
      this.qrModel.qrCode = [];
      return;
      //此处为选择后的文件
      console.log(this.multipleSelection, "this.multipleSelection");
      var pwin = window.open();
      this.multipleSelection.map((item, i) => {
        pwin.document.write(
          '<div style="margin:10px;border:1px solid black; float:left"><div id="qrcode' +
            i +
            '"></div>' +
            '<span style="margin-left: 30px;float: left;margin-top: 10px;">合同编号：' +
            item.contractCode +
            "</span></div>"
        );
        var qrcode = new QRCode(pwin.document.getElementById("qrcode" + i), {
          text: item.contractCode,
          width: 256,
          height: 256,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      });
      pwin.document.close();
      pwin.print();
    },
    message: function(msg, type) {
      this.$message({
        message: msg,
        type: type
      });
    }
  },
  created: function() {
    this.initList();
  }
};
</script>
<style lang="css" scoped>
.el-table .info-row {
  background: #5e97f6;
}

#demo16 {
  border: 1px solid #5e97f6;
}

.arrow {
  border: 0.15rem solid #5e97f6;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.dayin {
  margin-bottom: 1rem;
}

.taskManager {
  margin: 15px;
}

.table-col-wid {
  width: 10%;
}

.one {
  margin-bottom: 15px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}

.personTag {
  margin-left: 10px;
}
</style>